<template>
  <view class="container">
    <!-- 分组 -->
    <view class="list" v-if="showType === 2">
      <view class="tabs">
        <view
          @click="tabClick(item, index)"
          class="tab-item"
          :class="{ active: tabIndex == index }"
          v-for="(item, index) in modelGroupList"
          :key="index"
          >{{ item.type_name }}</view
        >
      </view>
      <view class="model-list">
        <view
          class="model-item"
          v-for="(item, index) in modelList"
          :key="index"
          @click="modelClick(item)"
        >
          <text class="name">{{ item.name }}</text>
          <text class="price" v-if="item.guide_price"
            >{{ item.guide_price }}万</text
          >
        </view>
      </view>
    </view>
    <!-- 不分组 -->
    <view class="model-list" v-if="showType === 1">
      <view
        class="model-item"
        v-for="(item, index) in modelList"
        :key="index"
        @click="modelClick(item)"
      >
        <text class="name">{{ item.name }}</text>
        <text class="price" v-if="item.guide_price"
          >{{ item.guide_price }}万</text
        >
      </view>
    </view>
    <view class="custom-model-txt" @click="customModelClick">自定义车型</view>
    <!-- 自定义车型 -->
    <uni-popup ref="popup" type="bottom">
      <view class="custom-model">
        <view class="c-title">自定义车型</view>
        <view class="c-content">
          <input
            :adjust-position="false"
            @blur="keyboardHeight = 0"
            :cursorSpacing="20"
            type="text"
            :focus="inputFocus"
            placeholder="请输入车型"
            v-model="customModel"
          />
          <view class="confirm-btn" @click="confirm">确定</view>
        </view>
      </view>
      <view :style="{ height: keyboardHeight + 'px' }"></view>
    </uni-popup>
  </view>
</template>

<script>
import { carsVehicleModelsList } from "@/api/newCarSerach.js";
export default {
  data() {
    return {
      keyboardHeight: 0,
      inputFocus: false,
      showType: 1, // 1：无需分组 2：需要分组
      modelGroupList: [],
      modelList: [],
      customModel: "",
      brand_id: "",
      series_id: "",
      series_two_id: "",
      tabIndex: 0,
    };
  },
  onLoad(option) {
    if (option) {
      this.brand_id = option.brand_id;
      this.series_one_id = option.series_one_id;
      this.series_two_id = option.series_id;
      this.init(option.series_id);
    }
  },
  onShow() {
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
    });
  },
  methods: {
    init(series_id) {
      carsVehicleModelsList(series_id).then((res) => {
        // 1：无需分组 2：需要分组
        this.showType = res.data.type;
        if (this.showType === 1) {
          this.modelList = res.data.data;
        } else if (this.showType === 2) {
          this.modelGroupList = res.data.data;
          this.modelList = this.modelGroupList?.[0].models || [];
        }
      });
    },
    tabClick(item, index) {
      this.modelList = item.models;
      this.tabIndex = index;
    },
    modelClick(item) {
      var pages = getCurrentPages();
      //上上上一页面
      var prevPage = pages[pages.length - 4];
      prevPage.$vm.backData({
        type: "model",
        data: item,
      }); // backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
      // 返回上一页
      uni.navigateBack({
        delta: 3,
      });
    },
    // 自定义车型
    customModelClick() {
      this.customModel = this.modelList[0].custom_name;
      this.$refs.popup.open();
      this.inputFocus = true;
    },
    confirm() {
      if (this.customModel) {
        var pages = getCurrentPages();
        //上上上一页面
        var prevPage = pages[pages.length - 4];
        prevPage.$vm.backData({
          type: "model",
          data: {
            name: this.customModel,
            brand_id: this.brand_id,
            series_one_id: this.series_one_id,
            series_two_id: this.series_two_id,
            source_type_id: this.modelList?.[0].source_type_id,
            type: "custom",
          },
        }); // backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
        // 返回上一页
        uni.navigateBack({
          delta: 3,
        });
      } else {
        uni.showToast({
          title: "请输入自定义车型",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
}
.list {
  .tabs {
    display: flex;
    background-color: #fff;
    .tab-item {
      padding: 29rpx 0;
      margin: 0 29rpx;
      &.active {
        color: #0e59ea;
        border-bottom: 4rpx solid #0e59ea;
      }
    }
  }
}
.model-list {
  margin-top: 20rpx;
  .model-item {
    background-color: #fff;
    padding: 29rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #e6e6e6;
    &:last-child {
      // border-bottom: none;
    }
    .name {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
    }
    .price {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
      white-space: nowrap;
    }
  }
}
.custom-model-txt {
  background-color: #fff;
  padding: 29rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
}
.custom-model {
  background-color: #fff;
  padding: 40rpx 28rpx;
  .c-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #000000;
    text-align: center;
  }
  .c-content {
    margin-top: 34rpx;
    display: flex;
    align-items: center;
    input {
      padding: 0 12rpx;
      flex: 1;
      height: 92rpx;
      background: #f3f3f3;
      border-radius: 14rpx;
    }
    view {
      margin-left: 23rpx;
      width: 173rpx;
      height: 92rpx;
      line-height: 92rpx;
      background: #0e59ea;
      border-radius: 14rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
